<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>积分管理</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <style>
        .layui-layer{
            border-radius: 25px !important;
        }
    </style>
</head>
<body>
<div class="activity personalIntegral" id="personHeight">
    <div class="personalIntegralTop">
        张珊珊
        <text class="fgxSty">|</text>
        <img src="../img/hy.png">
        <text class="zyzHy">一般志愿者</text>
    </div>
    <div class="scpm">
        <img src="../img/shi.png" class="shiSty">
        志愿时长：<text class="textSty">12h</text>
        <img src="../img/ming.png" class="ming">
        排名信息：<text class="textSty">208</text>
    </div>
    <div class="jfdh">
        <div class="jfdhLeft">
            <div>积分信息(分)</div>
            <div class="point">24</div>
        </div>
        <div class="jfdhLeft">
            <div>销分券(张)</div>
            <div class="point">8</div>
        </div>
        <div class="jfdhLeft">
            <div class="inBtn">
                <button type="button" class="layui-btn" id="jfdh">积分兑换</button>
            </div>
            <div class="inBtn">
                <button type="button" class="layui-btn xfqBtn">查看销分券</button>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="dhjl">
        <div class="dhjlTitle">
            <img src="../img/dhjl.png">
            兑换记录
        </div>
        <div class="jlBlock">
            <table class="layui-table" lay-skin="nob">
                <colgroup>
                    <col width="300">
                    <col width="300">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>使用积分(分)</th>
                    <th>兑换销分券(张)</th>
                    <th>兑换时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1</td>
                    <td>2019/09/24 13:00:00</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<div id="tanchu" style="display: none;">
    <img src="../img/jfdh1.png" class="jfdhImg">
    <div class="tishiCon">您确定使用3个积分兑换一张销分券吗？</div>
    <div class="jfdhBtn">
        <div class="dhBtn">
            <img src="../img/qudingDh.png" class="dhSty">
        </div>
        <div class="qxBtn">
            <img src="../img/quxiaoDh.png" class="dhSty">
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/TweenMax.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script>
    $(function () {
        $(".jfdhLeft:last").css("border","none");
        $(".jlBlock table tr:first").css("border","none");
        $(".jlBlock table tr:last").css("border","none");
    });
    //layui
    layui.use(['form','laydate','laypage','layer'], function(){
        var form = layui.form
            ,laydate = layui.laydate
            ,laypage = layui.laypage
            , layer = layui.layer;
        var tc;
        // 积分兑换
        $("#jfdh").on('click',function () {
            //示范一个公告层
            tc=layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: true
                ,area: '500px'
                ,shade: 0.3
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,moveType: 1 //拖拽模式，0或者1
                ,content:  $('#tanchu')
                ,success: function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.layui.com/'
                        ,target: '_blank'
                    });
                }
            });
        });
        $(".dhBtn").on('click',function () {
            layer.close(tc);
        });
        $(".qxBtn").on('click',function () {
            layer.close(tc);
        });
    });
</script>
</html>